<template>
	<view class="root">
		<image class="img" :src="image_header+'upgrade.jpg'" mode=""></image>
		<view class="rule text-center">
			<view class="header">
				<view class="margin-bottom_10 spacing">当前等级:{{ info.grade_name }}</view>
				<view>佣金比例:{{ info.proportion | commissionRate }}%</view>
			</view>
			<uni-swiper-dot :info="infoData" :current="current" field="content" :mode="mode" :dotsStyles="dotsStyles">
				<swiper @change="change" :current='current' class="swiper-box" interval="2000" duration="500">
					<swiper-item v-for="(item, index) in infoData" :key="index">
						<view class="condition">
							<view class="rule-color margin-bottom_15 rule-title spacing">
								<!-- <img class="icon-after" src="/static/icon.png" alt="" /> -->
								<Icon type="iconicon" color="#FCA94E" size="10"></Icon>
								<text style="display: inline-block;margin: 0 30rpx;">升级条件</text>
								<!-- <img class="icon-after" src="/static/icon.png" alt="" /> -->
								<Icon type="iconicon" color="#FCA94E" size="10"></Icon>
							</view>
							<view class="margin-bottom_15">
								<text style="margin-right: 10px;">等级:{{ item.grade_name }}</text>
								<text>佣金比例:{{ item.proportion | commissionRate }}%</text>
							</view>
							<ul style="margin-bottom: 30rpx;font-size: 26rpx;">
								<template v-if='item.upgrade'>
									 <li class="rule-li" v-for='(li,index) in item.upgrade' :key='index'>
									 	<view class="gray">{{ li }}</view>
									 </li>
								</template>
							</ul>
							<view class="gray text-center" v-if="item.upgrade_condition" style="font-size: 28rpx;"><text>*{{item.upgrade_condition}}</text></view>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
	</view>
</template>

<script>
let App = getApp().globalData;
import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue';
import Icon from '@/components/Icon/Icon.vue';
export default {
	components: { Icon, uniSwiperDot },
	data() {
		return {
			dotsStyles: {
				backgroundColor: '#fff',
				selectedBackgroundColor: '#fff',
				selectedBorder: '#fff',
				border: '#fff'
			},
			infoData: [],
			info: {
				id: '2',
				grade_name: 'test', // 等级名称
				invite: '2', // 邀请人数
				commission: '2.00', // 推广佣金
				myself_money: '2.00', // 自购商品金额
				client: '2', // 客户数
				is_invite: '1', // 是否选择邀请人数 0否 1是
				is_commission: '1', // 是否选择推广佣金 0否 1是
				is_myself_money: '1', // 是否选择自购商品金额 0否 1是
				is_client: '1', // 是否选择客户数 0否 1是
				proportion: '0.15', // 佣金比例
				upgrade_condition: '0',
				content: '内容 A'
			},
			current: 0,
			mode: 'round',
			grade_id: '',
			image_header:""
		};
	},
	
	async onLoad(option) {
		await this.$onLaunched;
		this.image_header = this.$store.image_header;
		
		this.grade_id = option.grade_id;
		if (this.grade_id) {
			this.getUpgradeConditions();
		}
	},
	
	filters: {
		commissionRate(val) {
			if (val) {
				return (val * 100).toFixed(2);
			}
		}
	},
	
	
	methods: {
		
		change(e) {
			console.log('e.detail.current',e.detail.current)
			this.current = e.detail.current;
		},
		
		moduleDisplay(){
	        let id = Number(this.grade_id) ;
			let _self = this;
			  this.infoData.filter((item,index)=>{
				if(Number(item.id)===id){
					 if(Number(item.id)==this.infoData[this.infoData.length-1].id){ //最后一个等级
						 _self.current = index;
					 }else {
						  _self.current = index+1;
					 }
				}
			})
		},
		
		
		getUpgradeConditions() {
			let obj = {};
			let _self = this;
			this.$request('Distribution/MiniDistributor/getUpgradeConditions', obj).then(res => {
				if (res.status === 1) {
					_self.infoData = res.data.upgrade_conditions;
					_self.info =res.data.grade_info;
					_self.moduleDisplay()
				} else {
					App.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		}
	}
};
</script>

<style lang="less">
@import '@/common/index.less';
page {
	padding-bottom: 0;
}
.root {
	width: 100vw;
	height: 100vh;
	position: relative;
}
.rule {
	position: absolute;
	top: 0;
	left: 0;
	.wh;
	.header {
		color: @white;
		margin: 55rpx 0;
		view:nth-child(1) {
			font-size: 36rpx;
		}
	}
}
.condition {
	width: 60%;
	padding: 40rpx 60rpx 80rpx;
	margin: 0 auto;
	border-radius: @border-radius-xs;
	background-color: @white;
	.rule-li {
		text-align: left;
		margin-bottom: 10rpx;
		position: relative;
		text-indent: 1em;
		margin-bottom: 25rpx;
		&::after {
			position: absolute;
			top: 50%;
			left: 0;
			transform: translateY(-50%);
			display: inline-block;
			content: '';
			clear: both;
			width: 10rpx;
			height: 10rpx;
			background-color: #fca851;
			border-radius: 50px;
		}
	}
}
.rule-color {
	color: #fca851;
}
.rule-title {
	font-weight: 600;
	font-size: 32rpx;
}
.icon-after {
	width: 30rpx;
	height: 20rpx;
	margin: 0 15rpx;
}
.spacing {
	letter-spacing: 4rpx;
}
.swiper-box {
	height: 600rpx;
}
</style>
